<style lang="scss" scoped>
.border-ll {
  border-left: 1px solid #fff;
  color: #fff;
}
.code {
  background: linear-gradient(#fb934a, #f95e48);
  header {
    padding: 0.3rem 0;
  }
  main {
    padding: 0 0.25rem;
    .user_img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 100%;
    }
    .info {
      font-size: 0.13rem;
      width: 1.75rem;
      line-height: 0.18rem;
      padding: 0.05rem 0 0.2rem;
    }
    .user_code {
      width: 1.75rem;
      height: 1.75rem;
    }
  }
}
</style>


<template>
  <div class="code full">
    <img style="width:100%" v-if="PIC" :src="PIC" alt="">
    <div v-else>
      <header class="cfff flex-col flex-center flex-middle">
        <div class="padding-r15 font-16">LOGO</div>
        <div class="border-ll padding-l15">
          <div class="padding-b5">智能屋</div>
          <div>一劳永逸赚百万</div>
        </div>
      </header>
      <main class="">
        <div class="bor-r bgfff flex-row flex-center padding-20">
          <div class="img-bg user_img" :style="{backgroundImage:`url(${img})`}"></div>
          <div class="user_name padding-10">我是：{{name}}</div>
          <div class="c82 info font-">每位新人推荐成交赚1%佣金，您坐享每套0.5%奖励</div>
          <div class="user_code img-bg" :style="{backgroundImage:`url(${qrImg})`}"></div>
          <div class="c82 text-c padding-tb20">长按此图识别二维码</div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode"; // 二维码
var wx = require("weixin-js-sdk");
import CONFIG from "../../js/CONFIG.js";
import html2canvas from "html2canvas";
export default {
  name: "my_code",
  data() {
    return {
      qrImg: "",
      img: "",
      PIC: null,
      name: null,
      getUserinfo: null,
      getShareInfo: {
        //加载分享文案
        title: "智能屋楼盘分享",
        desc: null,
        link: null
      }
    };
  },
  computed: {
    code() {
      return this.$store.state.commonStore.houseInfo;
    }
  },
  created() {
    let data = this.getCache("userInfo"),
      THIS = this;
    this.img = data.wximpurl;
    this.name = data.username;
    this.getShareInfo.desc = `我是${
      this.name
    }",我为智能屋楼盘做代言啦，快来看看吧"`;
    this.getShareInfo.link = this.code.code;
    this.toCode(this.code.code);

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    // 注册微信分享
    wx.onMenuShareAppMessage({
      title: THIS.getShareInfo.title, // 分享标题
      desc: THIS.getShareInfo.desc, // 分享描述
      link: THIS.getShareInfo.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      // imgUrl: "", // 分享图标
      type: "link", // 分享类型,music、video或link，不填默认为link
      dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
      success: function() {
        // 用户确认分享后执行的回调函数
      },
      cancel: function() {
        // 用户取消分享后执行的回调函数
        THIS.showCancelTips();
      }
    });

    wx.onMenuShareQQ({
      title: THIS.getShareInfo.title, // 分享标题
      desc: THIS.getShareInfo.desc, // 分享描述
      link: THIS.getShareInfo.link, // 分享链接
      // imgUrl: "", // 分享图标
      success: function() {
        // 用户确认分享后执行的回调函数
      },
      cancel: function() {
        // 用户取消分享后执行的回调函数
        THIS.showCancelTips();
      }
    });

    wx.onMenuShareQZone({
      title: THIS.getShareInfo.title, // 分享标题
      desc: THIS.getShareInfo.desc, // 分享描述
      link: THIS.getShareInfo.link, // 分享链接
      imgUrl: "", // 分享图标
      success: function() {
        // 用户确认分享后执行的回调函数
      },
      cancel: function() {
        // 用户取消分享后执行的回调函数
        THIS.showCancelTips();
      }
    });

    wx.onMenuShareTimeline({
      title: THIS.getShareInfo.title, // 分享标题
      link: THIS.getShareInfo.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: "", // 分享图标
      success: function() {
        // 用户确认分享后执行的回调函数
      },
      cancel: function() {
        // 用户取消分享后执行的回调函数
        THIS.showCancelTips();
      }
    });
  },
  methods: {
    showCancelTips() {
      this.alert("您取消了分享操作");
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png");

      return dataURL; // return dataURL.replace("data:image/png;base64,", "");
    },
    toCode(id) {
      let that = this;
      QRCode.toDataURL(id).then(url => {
        that.qrImg = url;
        html2canvas(document.body).then(function(canvas) {
          let imgUri = canvas
            .toDataURL("image/png")
            .replace("image/png", "image/octet-stream"); // 获取生成的图片的url
          that.PIC = imgUri; // 下载图片
          that.layer("生成整张图片成功,您可以长按保存图片!", "b");
          // that.$msg.success("生成整张图片成功,您可以长按保存图片!");
        });
      });
    }
  }
};
</script>

